<template>
  <div class="col over-auto d-flex flex-column justify-content-between" v-loading="tableLoading">
    <div>
      <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="w-50 pr-2">
          <div class="title mb-3">设备当前固件版本号</div>
          <div class="itemBorder height-150 d-flex justify-content-center align-items-center">
            <div>
              <div class="mb-2 d-flex justify-content-center align-items-center">
                <el-image style="width: 60px; height: 60px" :src="bd_img" fit="cover"></el-image>
              </div>
              <div class="value">
                {{versionObj.localVersion ? versionObj.localVersion : "暂无数据"}}
              </div>
            </div>
          </div>
        </div>
        <div class="w-50 pl-2">
          <div class="title mb-3">云端固件最新版本号</div>
          <div class="itemBorder height-150 d-flex justify-content-center align-items-center">
            <div>
              <div class="mb-2 d-flex justify-content-center align-items-center">
                <el-image style="width: 60px; height: 60px" :src="yd_img" fit="cover"></el-image>
              </div>
              <div class="value">
                {{versionObj.newVersion ? versionObj.newVersion : "暂无数据"}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-3">
        <div class="title mb-3">是否最新版本号</div>
        <div class="itemBorder height-70 d-flex justify-content-between align-items-center pl-3 pr-3">
          <div class="d-flex align-items-center">
            <div class="mr-2">
              <el-image style="width: 32px; height: 32px" :src="bd_img" fit="cover"></el-image>
            </div>
            <div class="value">
              {{versionObj.localVersion ? versionObj.localVersion : "暂无数据"}}
            </div>
          </div>
          <div :class="versionObj.isNew == 'Y' ?'value1':'value2'">{{versionObj.isNew == "Y" ? "当前是最新版本" : "当前不是最新版本"}}
          </div>
        </div>
      </div>
      <div class="mb-3">
        <div class="title mb-3">设备升级方式</div>
        <div class="d-flex justify-content-between align-items-center">
          <div class="itemBorder height-70 width-20 d-flex justify-content-center align-items-center"
               :class="item.value == versionObj.forces ? 'value3':''" v-for="(item,index) in deviceGo" :key="index">
            {{item.label}}
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center mb-3" v-if="versionObj.forces==2">
        <div class="width-20 mr-3">
          <div class="title mb-3">开始时间</div>
          <div class="itemBorder height-70 d-flex justify-content-center align-items-center">
            {{versionObj.forcesBeginTime}}
          </div>
        </div>
        <div class="width-20">
          <div class="title mb-3">结束时间</div>
          <div class="itemBorder height-70 d-flex justify-content-center align-items-center">
            {{versionObj.forcesEndTime}}
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-center align-items-center">
      <el-button v-if="versionObj.forces==0&&versionObj.localVersion!=versionObj.newVersion" class="mr-3"
                 type="primary" size="medium" @click="openIssueDialog()">指令下发
      </el-button>
      <el-button v-if="versionObj.forces!=3&&versionObj.forces!=4" type="success" size="medium"
                 @click="openRecordsDialog()">指令下发记录
      </el-button>
    </div>

    <!-- 指令下发记录 -->
    <yc-dialog ref="recordDialog" dialogTitle="指令下发记录" :showCenter="false">
      <template #content>
        <el-table
          :data="list"
          border
          size="mini"
          style="width: 100%"
          class="elTable"
          ref="tableRef"
          v-loading="tableLoading2"
        >
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column prop="sendCode" label="发送指令编码" align="center"/>
          <el-table-column prop="oldVersion" label="老版本号" align="center"/>
          <el-table-column prop="newVersion" label="新版本号" align="center"/>
          <el-table-column label="指令下发状态" align="center" width="250">
            <template slot-scope="{row}">
              <el-tag :type="controlStateList.filter(item => item.status==row.controlState)[0].type">
                {{controlStateList.filter(item => item.status==row.controlState)[0].name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="130">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="openGcDialog(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                    @pagination="pagination"/>
      </template>
      <template #footer>
        <el-button @click="$refs.recordDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 升级数据过程 -->
    <yc-dialog ref="gcDialog" dialogTitle="升级数据过程" :showCenter="false">
      <template #content>
        <el-table
          :data="list2"
          border
          size="mini"
          style="width: 100%"
          class="elTable"
          v-loading="tableLoading3"
        >
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column label="升级状态" align="center" width="250">
            <template slot-scope="{row}">
              <el-tag :type="controlStateList.filter(item => item.status==row.statusCode)[0].type">
                {{controlStateList.filter(item => item.status==row.statusCode)[0].name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="process" label="升级进度" align="center"/>
          <el-table-column prop="createTime" label="升级时间" align="center"/>
        </el-table>
      </template>
      <template #footer>
        <el-button @click="$refs.gcDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import {
    queryDeviceFirmware,
    updateDeviceFirmware,
    queryFirmwareSendPage,
    queryFirmwareSendDetail
  } from "@/api/showManage/index"

  export default {
    components: {
      ycDialog
    },
    props: {
      deviceCode: String
    },
    data() {
      return {
        tableLoading: false,
        tableLoading2: false,
        tableLoading3: false,
        faultCode: "",
        versionObj: {},
        deviceGo: [
          {
            label: "手动升级",
            value: "0"
          },
          {
            label: "自动升级",
            value: "1"
          },
          {
            label: "定时升级",
            value: "2"
          },
          {
            label: "无法升级",
            value: "3"
          },
          {
            label: "未分配升级方式",
            value: "4"
          }
        ],
        bd_img: require("@/assets/img/bd.png"),
        yd_img: require("@/assets/img/yd.png"),

        page: {
          pageSize: 10,
          pageIndex: 1
        },
        count: 0,
        list: [],

        controlStateList: [
          { status: "200", name: "升级成功", type: "success" },
          { status: "201", name: "升级中", type: "" },
          { status: "202", name: "升级失败，固件签名校验失败", type: "danger" },
          { status: "203", name: "升级失败，固件下载失败 ", type: "danger" },
          { status: "204", name: "升级失败，固件烧写失败", type: "danger" },
          { status: "205", name: "升级失败，下发命令内容有误 ", type: "danger" },
          { status: "206", name: "升级失败", type: "danger" },
          { status: "299", name: "升级失败，系统超时", type: "danger" },
        ],
        list2: [],
        dialogVisible: false
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
      this.getListData()
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      async getListData() {
        this.tableLoading = true
        const { status, success, object, message } = await queryDeviceFirmware({
          deviceCode: this.deviceCode
        })
        if (status == 200) {
          this.versionObj = object
        }
        this.tableLoading = false
      },

      // 指令下发
       openIssueDialog() {
        this.$confirm("是否确定指定下发, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          const { message, status } = await updateDeviceFirmware({
            deviceCode: this.deviceCode,
            newVersion: this.versionObj.newVersion,
            localVersion: this.versionObj.localVersion,
          })
          if (status == 200) {
            this.$message({
              type: "success",
              message: message
            })
          }
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },

      // 指令下发记录
      openRecordsDialog() {
        this.$refs.recordDialog.dialogVisible = true
        this.queryFirmwareSendPage()
      },

      async queryFirmwareSendPage() {
        this.tableLoading2 = true
        const { object } = await queryFirmwareSendPage({
          deviceCode: this.deviceCode,
          ...this.page
        })
        this.count = object.count
        this.list = object.data
        this.tableLoading2 = false
      },
      pagination(pageItem) {
        this.queryFirmwareSendPage(pageItem.page, pageItem.limit)
      },


      openGcDialog(row) {
        this.$refs.gcDialog.dialogVisible = true
        this.queryFirmwareSendDetail(row.sendCode)
      },
      async queryFirmwareSendDetail(sendCode) {
        this.tableLoading3 = true
        const { object } = await queryFirmwareSendDetail({
          sendCode
        })
        this.list2 = object
        this.tableLoading3 = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .height-150 {
    height: 150px;
  }

  .height-70 {
    height: 70px;
  }

  .width-20 {
    width: 19%;
  }

  .title {
    font-size: 16px;
    font-family: "Microsoft YaHei";
    font-weight: 600;
    color: #333333;
  }

  .value {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: #666666;
  }

  .value1 {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: #3276FF;
  }

  .value2 {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: #ff6d6d;
  }

  .value3 {
    background: rgba(171, 199, 254, 0.57);
    border: 1px solid #3276ff !important;
    border-radius: 8px;
    color: #3276FF;
  }

  .itemBorder {
    border: 1px dashed #999999;
    border-radius: 8px;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
